<template>
  <div>
    <div>
      <form-panel ref="formPanel" :list="fromList" :cols="2" labelWidth="130" :isSubmitBtn="false"></form-panel>
      <el-upload
        style="width:50%"
        action="/api/file/oss/upload"
        :on-preview="this.handlePreview"
        :on-remove="this.handleRemove"
        :before-remove="this.beforeRemove"
        :on-success="this.handleSuccess"
        :on-exceed="handleExceed"
        accept=".jpg,.png,.pdf,.xls,.xlsx,.rar"
        :limit="1"
        :file-list="this.fileList"
        disabled
      >
        <el-button size="small" type="primary" disabled>点击上传</el-button>
        <div slot="tip" class="el-upload__tip" disabled>附件支持上传excel、PDF、RAR、JPG格式</div>
      </el-upload>
      <BreakSpace label="审核描述" :containerStyle="{ marginBottom: '10px' }"></BreakSpace>

      <template>
        <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="textarea" maxlength="300" show-word-limit> </el-input>
      </template>

      <BreakSpace label="审核记录" :containerStyle="{ marginBottom: '10px' }"></BreakSpace>
      <FilterTable
        ref="table"
        columnsRef="mileage-modify-apply"
        height="200"
        :isSelectColumn="false"
        :columns="columns"
        :fetchapi="fetchApi"
        :params="fetchParams"
        :datakey="'rows'"
        :onColumnsChange="columns => (this.columns = columns)"
      >
      </FilterTable>
    </div>

    <div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'right'
      }"
    >
      <AjaxButton type="primary" :click="passClick">通过</AjaxButton>
      <AjaxButton type="primary" :click="turnDownClick">驳回</AjaxButton>
      <AjaxButton type="primary" :click="rejectClick">拒绝</AjaxButton>
      <el-button @click="closeDialog">关闭</el-button>
    </div>
  </div>
</template>

<script>
import FormPanel from '../../../../components/FormPanel/FormPanel.vue';
import { selectWarrantyDateChangeLog, warrantyDateChangeAssessor, getAllUser } from '@/api/repair/repairBusiness/warrantyDateModify/index.js';
import moment from 'moment';
import { getConfigHeaders } from '@/api/fetch';
import Cookies from 'js-cookie';
import { dictionary } from '@/utils/dictMixin';
export default {
  components: { FormPanel },
  props: ['row', 'type'],
  mixins: [dictionary],
  data() {
    return {
      fromList: this.createFromList(),
      changeId: undefined,
      isShowGdcx: false,
      fileList: [],
      fetchParams: { xhrAbort: false, changeNo: this.row.changeNo, ownerCode: this.row.ownerCode },
      fetchApi: selectWarrantyDateChangeLog,
      columns: this.createTableColumns(),
      textarea: '',
      getConfigHeaders: getConfigHeaders
    };
  },
  computed: {
    submitEnable() {
      return !!!this.fromList.find(x => x.fieldName === 'changeNo').initialValue;
    }
  },
  mounted() {
    if (this.type == 'edit') {
      this.fromList.forEach(x => {
        x.initialValue = this.row[x.fieldName];
      });
      if (this.row.url) {
        this.fileList.push({ name: this.row.name, url: this.row.url });
      }
      this.changeId = this.row.changeId;
    }
    this.getAllUser();
  },
  methods: {
    async getAllUser() {
      let res = await getAllUser();
      if (res.resultCode === 200) {
        let allUser = res.data.map(x => ({
          text: x.employeeName,
          value: x.userId + ''
        }));
        this.columns.find(x => x.dataIndex === 'examUserId').dictItems = allUser;
      }
    },
    createFromList() {
      return [
        {
          type: 'INPUT',
          label: '保修日期变更申请单号',
          fieldName: 'changeId',
          disabled: true,
          hidden: true,
          initialValue: undefined
        },
        {
          type: 'INPUT',
          label: '保修日期变更申请单号',
          fieldName: 'changeNo',
          disabled: true
        },
        {
          type: 'INPUT',
          label: 'VIN',
          fieldName: 'vin',
          disabled: this.type == 'edit',
          rules: [{ required: true, message: '请输入', trigger: 'blur' }],
          unitRender: () => {
            return <el-button icon="el-icon-search" onClick={() => (this.isShowGdcx = true)}></el-button>;
          }
        },

        {
          type: 'INPUT',
          label: '车主姓名',
          fieldName: 'ownerName',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '经销商代码',
          fieldName: 'ownerCode',
          hidden: true
        },
        {
          type: 'INPUT',
          label: '车牌号',
          fieldName: 'license',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '申请人',
          fieldName: 'changeUserName',
          initialValue: Cookies.get('username') || '',
          disabled: true
        },
        {
          type: 'DATE',
          label: '申请时间',
          fieldName: 'changeDate',
          dateFormat: 'yyyy-MM-dd HH:mm:ss',
          dateType: 'datetime',
          initialValue: moment().format('YYYY-MM-DD HH:mm:ss'),
          disabled: true
        },
        {
          type: 'DATE',
          label: '原保修开始日期',
          fieldName: 'beforeBeginDate',
          format: 'yyyy-MM-dd',
          dateType: 'date',
          initialValue: moment().format('YYYY-MM-DD'),
          disabled: true
        },
        {
          type: 'DATE',
          label: '原保修结束日期',
          fieldName: 'beforeEndDate',
          format: 'yyyy-MM-dd',
          dateType: 'date',
          initialValue: moment().format('YYYY-MM-DD'),
          disabled: true
        },
        {
          type: 'DATE',
          label: '变更后保修开始日期',
          fieldName: 'afterBeginDate',
          format: 'yyyy-MM-dd',
          dateType: 'date',
          rules: [{ required: true, message: '请输入', trigger: 'blur' }],
          change: val => {
            // this.fromList.find(x => x.fieldName === 'afterEndDate').minDateTime = val;
          },
          disabled: true
        },
        {
          type: 'DATE',
          label: '变更后保修结束日期',
          fieldName: 'afterEndDate',
          format: 'yyyy-MM-dd',
          dateType: 'date',
          rules: [{ required: true, message: '请输入', trigger: 'blur' }],
          disabled: true
        },
        {
          type: 'INPUT',
          label: '申请原因',
          fieldName: 'remark',
          maxlength: 100,
          disabled: true
        }
        // {
        //   type: 'INPUT',
        //   label: '申请原因',
        //   fieldName: 'remark',
        //   maxlength: 100
        // }
      ];
    },
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '审核人',
          dataIndex: 'examUserId',
          sorter: true,
          dictItems: []
        },

        {
          title: '审核时间',
          dataIndex: 'createdAt',
          width: 150,
          dateFormat: 'yyyy-MM-dd HH:mm:ss',
          sorter: true
        },
        {
          title: '审核状态',
          dataIndex: 'examStatus',
          sorter: true,
          dictItems: this.createDictList('9993')
        },
        {
          title: '备注',
          dataIndex: 'examRemarks',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input',
          dictItems: []
        }
      ];
    },
    handleExceed() {
      this.$notify.warning(`只能上传1个附件。如需更新附件，请先删除之前上传的附件`);
    },

    handleSuccess(response, file, fileList) {
      // this.fileList.push({ name: file.name, url: `${SERVER.DMSCLOUD_REPAIR}/changeWarrantyDate/downFile?FILE_PATH=${file.response.data.path}` });
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      let fullUrl = file.url;
      const downloadElement = document.createElement('a');
      downloadElement.style.display = 'none';
      downloadElement.href = fullUrl;
      downloadElement.download = file.name; //下载后文件名
      document.body.appendChild(downloadElement);
      downloadElement.click(); //点击下载
      document.body.removeChild(downloadElement); //下载完成移除元素
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    async warrantyDateChangeAssessor(type) {
      // 99931004通过 999310003驳回 99931005拒绝
      const [err, data] = await this.$refs.formPanel.GET_FORM_DATA();
      if (err) return;
      if (type === '99931003') {
        // 驳回时，原因必填
        if (!(this.textarea && this.textarea.length)) {
          this.$notify.error({ type: '提示信息', message: '驳回需要填写审核描述！！！' });
          return;
        }
      }
      let params = { ...data };
      params.type = type;
      params.examRemarks = this.textarea;
      params.changeId = this.fromList.find(x => x.fieldName === 'changeId').initialValue;
      params.ownerCode = this.fromList.find(x => x.fieldName === 'ownerCode').initialValue;

      let res = await warrantyDateChangeAssessor(params);
      if (res.resultCode === 200) {
        this.$notify.success({ type: '提示信息', message: '操作成功!!' });
        this.$emit('close');
      }
    },
    // 通过
    async passClick() {
      await this.warrantyDateChangeAssessor('99931004');
    },
    // 驳回
    async turnDownClick() {
      await this.warrantyDateChangeAssessor('99931003');
    },
    // 拒绝
    rejectClick() {
      this.warrantyDateChangeAssessor('99931005');
    },
    // 提报
    submit() {
      this.saveDialog('submit'); //
    },
    closeDialog(param) {
      this.$emit('close');
    }
  }
};
</script>
